<!--
 * 歌手
 *
 * @Author: Reisen
 * @Date: 2025-11-26
-->
<template>
  <div class="singer">
    <ul class="singer-header">
      <li v-for="(item, index) in singerStyle" :key="index" @click="handleChangeView(item)"
        :class="{ 'active': item.name === activeName }">
        {{ item.name }}
      </li>
    </ul>
    <div>
      <content-list :contentList="data"></content-list>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
          :current-page="currentPage" :page-size="pageSize" :total="albumDatas.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ContentList from '../components/ContentList';
import { getAllSinger, getSingerOfSex } from '../api/index';
import { mixin } from "../mixins";
import { singerStyle } from '../assets/data/singer';

export default {
  name: 'singer',
  components: {
    ContentList
  },
  data () {
    return {
      albumDatas: [],      //歌手数据
      pageSize: 15,        //页面大小，一页有15条数据
      currentPage: 1,      //当前页，默认第一页
      singerStyle: [],           //风格
      activeName: '全部歌手'    //当前风格
    }
  },
  computed: {
    //计算当前表格中的数据
    data () {
      return this.albumDatas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  mounted () {
    this.singerStyle = singerStyle;
    this.getSingerList();
  },

  methods: {
    getSingerList () {
      getAllSinger()
        .then(res => {
          this.currentPage = 1;
          this.albumDatas = res;
        })
    },
    //获取当前页
    handleCurrentChange (val) {
      this.currentPage = val;
    },
    //根据类型显示对应的歌手
    handleChangeView (item) {
      this.activeName = item.name;
      this.albumDatas = [];
      if (item.name === '全部歌手') {
        this.getSingerList();
      } else {
        this.getSingerOfSex(item.type)
      }
    },
    //根据性别查询对应的歌手
    getSingerOfSex (sex) {
      getSingerOfSex(sex)
        .then(res => {
          this.currentPage = 1;
          this.albumDatas = res;
        })
    },

  }
}
</script>

<style lang="scss" scoped>
.singer {
  padding: 20px;
  background-color: #e9f5ff;
}

.singer-header {
  list-style-type: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-bottom: 20px;
}

.singer-header li {
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.singer-header li.active {
  background-color: #007bff;
  color: #fff;
}

.singer-header li:hover {
  background-color: #f0f0f0;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
